<template>
  <div class="mine">
    <div class="setting" style="float: right; padding-right: 10px">
      <img
        src="../../../public/images/shezhi (1).png"
        style="width: 25px; height: 25px"
        alt=""
        @click="goSetting"
      />
    </div>
    <div class="userInfo">
      <img
        :src="squareUrl"
        style="width: 70px; height: 70px; border-radius: 50%"
        alt=""
      />
      <div style="margin-left: 10px; line-height: 35px">
        <p style="font-size: 14px; font-weight: bold">
          {{ userInfo.username }}
        </p>
        <p style="font-size: 14px; font-weight: bold; color: slategray">
          email:{{ userInfo.email }}
        </p>
      </div>
    </div>
    <div class="MyCart">
      <p style="display: flex; justify-content: space-between">
        <span style="font-weight: bold"> 我的订单 </span>
        <span style="font-size: 14px; color: darkgray" @click="godetail"
          >查看更多></span
        >
      </p>
      <ul>
        <li @click="godetails(0)">
          <img
            src="../../../public/images/daifukuan (1).png"
            style="width: 40px; height: 40px"
          />
          <span>所有订单</span>
        </li>
        <li @click="godetails(1)">
          <img
            src="../../../public/images/daifahuo.png"
            style="width: 40px; height: 40px"
          />
          <span>待发货</span>
        </li>

        <li @click="godetails(2)">
          <img
            src="../../../public/images/yiwancheng.png"
            style="width: 30px; height: 30px; margin: 6px 0"
          />
          <span>已完成</span>
        </li>
        <li @click="godetails(3)">
          <img
            src="../../../public/images/quxiaodingdanxiao.png"
            style="width: 35px; height: 35px; margin: 4px 0"
          />
          <span>已取消</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import router from "@/router";
import request, { getServerUrl } from "@/utils/request";
import { showToast, showFailToast } from "vant";
export default {
  name: "mine",
  async created() {
    const id = localStorage.getItem("id");
    const result = await request.get("user/action?id=" + id);
    this.userInfo = result.data.user;
    // 拼接用户头像地址
    this.squareUrl =
      getServerUrl() + "media/userAvatar/" + result.data.user.avatar;
  },
  data() {
    return {
      userInfo: [],
      squareUrl: "",
    };
  },
  methods: {
    // 退出登录
    deltelogin() {
      localStorage.clear();
      router.replace("/login");
      showToast({
        message: "退出成功!",
        position: "top",
      });
    },
    // 跳转订单页
    godetail() {
      router.push({ path: "/order", query: { active: 0 } });
    },
    godetails(active) {
      router.push({ path: "/order", query: { active: active } });
    },
    // 跳转设置页面
    goSetting() {
      router.push({ path: "/setting" });
    },
  },
};
</script>
<style lang="scss">
.mine {
  background-color: #f3f9f7;
  padding: 10px;
  height: 85vh;
  .userInfo {
    padding: 20px;
    display: flex;
  }
  .MyCart {
    width: 85vw;
    height: 100px;
    padding: 10px;
    background-color: #fff;
    border-radius: 20px;
    margin: 0 auto;
    ul {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      height: 80px;
      li {
        width: 23%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
